<template>
	<div class="app-container">
		<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
			<el-form-item v-if="moreSearch" label="表单字段">
				<el-input v-model="searchFrom.ffId" placeholder="表单字段"></el-input>
			</el-form-item>
			<el-form-item label="表单的key">
				<el-input v-model="searchFrom.ffKey" placeholder="表单的key"></el-input>
			</el-form-item>
			<el-form-item label="表单名称">
				<el-input v-model="searchFrom.ffName" placeholder="表单名称"></el-input>
			</el-form-item>
			<el-form-item v-if="moreSearch" label="表单描述">
				<el-input v-model="searchFrom.ffDescription" placeholder="表单描述"></el-input>
			</el-form-item>
			<el-form-item v-if="moreSearch" label="表单数据">
				<el-input v-model="searchFrom.ffData" placeholder="表单数据"></el-input>
			</el-form-item>
			<el-form-item label="分组">
				<el-input v-model="searchFrom.ffGroup" placeholder="分组"></el-input>
			</el-form-item>
			<el-form-item v-if="moreSearch" label="是否启用">
				<el-select v-model="searchFrom.ffEnable" multiple placeholder="请选择">
					<el-option v-for="item in options.ffEnable" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="更多">
				<el-switch v-model="moreSearch" @change="moreChange">
				</el-switch>
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
				<el-button type="primary" v-permission="'flowable:flowFrom:insert'" @click="addFlowFrom"><i class="el-icon-plus" />新增</el-button>
			</el-form-item>
		</el-form>
		<el-table class="tableLimit" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
			<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width" :header-align="item.width">
				<template slot-scope="{row}">
					<template v-if="item.type == 'select'">
						<span>{{ translation[item.field][row[item.field]] }}</span>
					</template>
					<template>
						<span>{{ row[item.field] }}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300px">
				<template slot-scope="scope">
					<el-button v-permission="'flowable:flowFrom:update'" icon="el-icon-edit" type="primary" size="mini" @click="editJson(scope.$index, scope.row)">表单设计</el-button>
					<el-button v-permission="'flowable:flowFrom:update'" icon="el-icon-edit" type="primary" size="mini" @click="editFlowFrom(scope.$index, scope.row)">编辑</el-button>
					<el-button v-permission="'flowable:flowFrom:delete'" icon="el-icon-delete" size="mini" type="danger" @click="deleteFlowFrom(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="page.currentPage"
		 :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
		 background>
		</el-pagination>
		<el-dialog width="40%" title="信息" :visible.sync="flowFromAddFormVisible" center>
			<flowFromEdit :flowFromInfo="flowFromInfo" />
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-close" @click="flowFromAddFormVisible = false">取 消</el-button>
				<el-button icon="el-icon-check" type="primary" @click="save">保 存</el-button>
			</span>
		</el-dialog>
		<el-dialog v-el-drag-dialog width="40%" title="编辑表单" :fullscreen='Jsonfullscreen' :visible.sync="jsonVisiable" center>
			<vue-json-editor :showBtns="false" :mode="'code'" lang="zh_cn" v-model="jsonValue" style="min-height: 300px;" />
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-close" @click="jsonVisiable = false">取 消</el-button>
				<el-button icon="el-icon-check" type="primary" @click="jsonSave">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<style>
	textarea.jsoneditor-text,
	.ace-jsoneditor {
		min-height: 600px
	}
	.jsoneditor-poweredBy{
	     display: none;
	  }

	  .tableLimit tr td .cell{
	     overflow : hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;      /*可以显示的行数，超出部分用...表示 */
	    -webkit-box-orient: vertical;

	  }
</style>
<script>
	import elDragDialog from '@/directive/el-drag-dialog'
	import vueJsonEditor from 'vue-json-editor'
	import JsonEditor from '@/components/JsonEditor'
	import request from '@/utils/request'
	import permission from '@/directive/permission/index.js' // 权限判断指令
	import flowFromEdit from '@/views/flowable/flow-from/flow-from-edit.vue'
	export default {
		name: 'flowFromList',
		components: {
			flowFromEdit,
			JsonEditor,
			vueJsonEditor
		},
		directives: {
			permission,
			elDragDialog
		},
		data() {
			return {
				Jsonfullscreen: false,
				//json编辑表单是否可见
				jsonVisiable: false,
				//json的值
				jsonValue: null,
				//更多检索条件
				moreSearch: true,
				//弹窗是否可见
				flowFromAddFormVisible: false,
				//搜索表单
				searchFrom: {
					ffKey: "",
					ffName: "",
					ffGroup: "",
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				flowFromInfo: {
					ffId: "",
					ffKey: "",
					ffName: "",
					ffDescription: "",
					ffData: "",
					ffGroup: "",
					ffEnable: "",
				},
				//所有的下拉选项
				options: {
					ffEnable: [],
				},
				//表头
				tableColumn: [{
						field: 'ffId',
						title: '表单字段',
					},
					{
						field: 'ffKey',
						title: '表单的key',
					},
					{
						field: 'ffName',
						title: '表单名称',
					},
					{
						field: 'ffDescription',
						title: '表单描述',
					},
					{
						field: 'ffData',
						title: '表单数据',
					},
					{
						field: 'ffGroup',
						title: '分组',
					},
					{
						field: 'ffEnable',
						title: '是否启用 0：未启用，1：已启用',
						type: 'select'
					},
				],
				//数据转译
				translation: {
					ffEnable: {},
				},
				//所有的下拉选项
				options: {
					ffEnable: [],
				},
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				}
			}
		},
		//页面初始化加载
		created() {
			this.getList();
			this.getFfEnable();
		},
		methods: {
			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/flowable/flowFrom/queryByPage',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			//保存用户信息
			save() {
				var url = '/flowable/flowFrom/insert';
				if (this.flowFromInfo.ffId) {
					url = '/flowable/flowFrom/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.flowFromInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.flowFromAddFormVisible = false;
				})
			},
			//添加
			addFlowFrom() {
				this.flowFromInfo = {};
				this.flowFromAddFormVisible = true;
			},
			//json 数据保存
			jsonSave() {
				debugger
				this.flowFromInfo['ffData'] = JSON.stringify(this.jsonValue);
				this.save();
				this.jsonVisiable = false;
			},
			//编辑json数据
			editJson(index, row) {
				this.flowFromInfo = {
					ffId: "",
					ffKey: "",
					ffName: "",
					ffDescription: "",
					ffData: "",
					ffGroup: "",
					ffEnable: "",
				}
				this.flowFromInfo = row;
				debugger
				if(this.isJSON(this.flowFromInfo['ffData'])){
					this.jsonValue = JSON.parse(this.flowFromInfo['ffData'])
				}else{
					this.jsonValue = this.flowFromInfo['ffData']
				}
				this.jsonVisiable = true;
			},
			//编辑
			editFlowFrom(index, row) {
				this.flowFromInfo = {
					ffId: "",
					ffKey: "",
					ffName: "",
					ffDescription: "",
					ffData: "",
					ffGroup: "",
					ffEnable: "",
				}
				this.flowFromInfo = row;
				this.flowFromAddFormVisible = true;
			},
			//删除用户
			deleteFlowFrom(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/flowable/flowFrom/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.flowFromAddFormVisible = false;
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom["ffId"] = null;
				this.searchFrom["ffDescription"] = null;
				this.searchFrom["ffData"] = null;
				this.searchFrom["ffEnable"] = null;
			},
			isJSON(str) {
				if (typeof str == 'string') {
					try {
						JSON.parse(str);
						return true;
					} catch (e) {
						console.log(e);
						return false;
					}
				}
				console.log('It is not a string!')
			},
			getFfEnable() {
				request({
					url: '/system/dict/query?dictGroupKey=common_enable',
					method: 'post'
				}).then(response => {
					this.options["ffEnable"] = response.data;
					for (var i = 0; i < this.options["ffEnable"].length; i++) {
						this.translation["ffEnable"][this.options["ffEnable"][i].dictKey] = this.options["ffEnable"][i].dictValue
					}
				})
			},
		}
	}
</script>
